<template>
  <view class="wrap">
    <uv-tabs :list="tabList" :current='tabsCurrent' :scrollable="false" lineWidth='36rpx' lineHeight='6rpx' lineColor='#E43222' inactiveStyle='font-weight: 500; font-size: 28rpx; color: #999999;' activeStyle='font-weight: 500; font-size: 28rpx; color: #2B2B2B;' itemStyle='height: 90rpx' @click="tabsClick"></uv-tabs>
    <uv-line hairline></uv-line>
    <view class="list" v-if="tabsCurrent == 0">
      <template v-for="(item, index) in list" :key="index">
        <view class="item" v-if="item.theme">
          <template v-if="item.theme.deletetime">
            <view class="hd col">
              <view class="body">该内容已删除</view>
              <view class="right">取消收藏</view>
            </view>
          </template>
          <template v-else>
            <view class="hd" @click="goDetail(item.theme, 'theme')">
              <view class="left" v-if="item.theme.user">
                <view class="avatar">
                  <image :src="setUrl(item.theme.user.avatar)" class="img"></image>
                  <image src="../../../static/vip.png" class="vip"></image>
                </view>
                <view class="fo">
                  <view class="name">{{ item.theme.user.nickname }}</view>
                  <view class="time">{{ timeFormat(item.theme.createtime, 'yyyy-mm-dd hh:MM:ss') }}</view>
                </view>
              </view>
              <view class="right" @click.stop="setCollect(item.theme, 'theme')">取消收藏</view>
            </view>
            <view class="content" @click="goDetail(item.theme, 'theme')">{{ item.theme.content }}</view>
          </template>
        </view>
      </template>
    </view>
    <view class="list" v-if="tabsCurrent == 1">
      <template v-for="(item, index) in list" :key="index">
        <view class="item" v-if="item.news">
          <template v-if="item.news.deletetime">
            <view class="hd col">
              <view class="body">该内容已删除</view>
              <view class="right">取消收藏</view>
            </view>
          </template>
          <template v-else>
            <view class="hd" @click="goDetail(item.news, 'news')">
              <view class="left" v-if="item.news.user">
                <view class="avatar">
                  <image :src="setUrl(item.news.user.avatar)" class="img"></image>
                  <image src="../../../static/vip.png" class="vip"></image>
                </view>
                <view class="fo">
                  <view class="name">{{ item.news.user.nickname }}</view>
                  <view class="time">{{ timeFormat(item.news.createtime, 'yyyy-mm-dd hh:MM:ss') }}</view>
                </view>
              </view>
              <view class="right" @click.stop="setCollect(item.news, 'news')">取消收藏</view>
            </view>
            <view class="title">{{ item.news.title }}</view>
            <view class="content" @click="goDetail(item.news, 'news')">{{ item.news.content }}</view>
          </template>
        </view>
      </template>
    </view>
    <view class="list" style="padding: 0 30rpx;" v-if="tabsCurrent == 2">
      <course :detail='item' v-for="(item, index) in list" :key="index" ></course>
    </view>
    <view class="liveList" v-if="tabsCurrent == 3">
      <view class="liveItem" v-for="(item,index) in list" :key="index" @click="goLiveDetail(item)">
        <view class="head">
          <view class="logo">
            <image :src="setUrl(item.thumb)" mode="aspectFill" class="img"></image>
            <text class="tag" v-if="item.need_enroll">报名</text>
          </view>
          <view class="right">
            <view class="boder">
              <view class="title line">{{ item.title }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <uv-empty :show='showLeng' mode="list" marginTop='200rpx'></uv-empty>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { post, get } from '@/api';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import { loading, setUrl } from '@/common';
import course from '../../../components/lesearch/course.vue';

const tabList = [{name: '主题'}, {name: '动态'}, {name: '课程'}, {name: '直播'}];
let tabsCurrent = ref(0);
let list = ref([]);
let last_page = 0;
let page = 1;
let limit = 15;
let showLeng = ref(false);

onLoad(() => {
  getThemeList();
})

// 下拉刷新
onPullDownRefresh(() => {
  page = 1
  list.value = [];
  if(tabsCurrent.value == 0){
    getThemeList();
  } else if(tabsCurrent.value == 1){
    getNewsList();
  } else if(tabsCurrent.value == 2){
    getLesearch();
  }else if(tabsCurrent.value == 3){
    getLive();
  }
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1000)
})
// 上拉加载
onReachBottom(async () => {
  if(last_page < page || last_page == page) return;
  page++
  if(tabsCurrent.value == 0){
    getThemeList();
  } else if(tabsCurrent.value == 1){
    getNewsList();
  } else if(tabsCurrent.value == 2){
    getLesearch();
  }else if(tabsCurrent.value == 3){
    getLive();
  }
})
// 获取主题收藏 
function getThemeList(){
  const params = {
    page,
    limit
  }
  post('api/association_theme/myCollectThemeList', params).then(res => {
    const data = res.data;
    last_page = data.last_page;
    list.value = [...list.value, ...data.data];
    if(list.value.length){
      showLeng.value = false;
    }else{
      showLeng.value = true;
    }
  })
}
// 获取动态收藏 
function getNewsList(){
  const params = {
    page,
    limit
  }
  post('api/news/myCollectNewsList', params).then(res => {
    const data = res.data;
    last_page = data.last_page;
    list.value = [...list.value, ...data.data];
    if(list.value.length){
      showLeng.value = false;
    }else{
      showLeng.value = true;
    }
  })
}
// 获取课程的收藏
function getLesearch(){
  const params = {
    page,
    limit
  };
  get('/api/lesson/getCollectList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
function getLive(){
  const params = {
    page,
    limit
  };
  get('/api/Live/getCollectList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
      console.log(list.value);
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
// 取消收藏
function setCollect(row, type){
  const params = {
    way: 2
  }
  let url = '';
  if(type == 'theme'){
    params.theme_id = row.id;
    url = 'api/association_theme/collectTheme';
  }
  if(type == 'news'){
    params.news_id = row.id;
    url = 'api/news/collectNews'
  }
  post(url, params).then(res => {
    if(res.code == 1){
      page = 1;
      list.value = [];
      if(type == 'theme') return getThemeList();
      if(type == 'news') return getNewsList();
    }
  })
}
function tabsClick(row){
  tabsCurrent.value = row.index;
  page = 1;
  list.value = [];
  if(row.index == 0){
    getThemeList();
  } else if(row.index == 1){
    getNewsList();
  }else if(row.index == 2){
    getLesearch();
  }else if(tabsCurrent.value == 3){
    getLive();
  }
}
function goLiveDetail(row){
  uni.navigateTo({
    url: `/pages/research/liveDetail?id=${row.id}`
  });
}
function goDetail(row, type){
  let url = '';
  if(type == 'theme'){
    url = '/pages/group/themeDetail'
  }
  if(type == 'news'){
    url = `/pages/dynamic/${row.type != 3 ? 'detail' : 'videoDetail'}`;
  }
  uni.navigateTo({
    url: `${url}?id=${row.id}`
  });
}
</script>

<style lang="scss" scoped>
  .liveList{
    padding: 0 30rpx;
    .liveItem{
      width: 100%;
      padding: 40rpx 0;
      border-bottom: 1px solid #EFEFEF;
      &:last-child{
        border-bottom: 0;
      }
      .head{
        width: 100%;
        display: flex;
        align-items: flex-start;
        .right{
          flex: 1;
          padding-left: 20rpx;
          width: 0;
          position: relative;
          .line{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .boder{
            display: flex;
            align-items: flex-start;
            .icon{
              width: 30rpx;
              height: 30rpx;
              transform: rotate(90deg);
              margin-top: 6rpx;
            }
            .title{
              font-weight: 400;
              font-size: 28rpx;
              color: #000000;
              flex: 1;
              width: 0;
              padding-right: 10rpx;
            }
          }
        }
        .logo{
          width: 283rpx;
          height: 171rpx;
          font-size: 0;
          border-radius: 10rpx;
          overflow: hidden;
          position: relative;
          .tag{
            background-color: #E43222;
            color: #FFFFFF;
            padding: 0 10rpx;
            height: 34rpx;
            line-height: 34rpx;
            border: 10rpx;
            position: absolute;
            right: 0;
            top: 0;
            font-size: 24rpx;
          }
        }
      }
    }
  }
  .list{
    .item{
      padding: 40rpx 30rpx;
      border-bottom: 1px solid #E6E6E6;
      &:last-child{
        border-bottom: 0;
      }
      .title{
        font-weight: 700;
        font-size: 28rpx;
        color: #2B2B2B;
      }
      .content{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        overflow: hidden;
        font-weight: 400;
        font-size: 30rpx;
        color: #2B2B2B;
      }
      .hd{
        width: 100%;
        padding-bottom: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &.col{
          padding-bottom: 0;
        }
        .body{
          font-weight: 500;
          font-size: 32rpx;
          color: #999999;
        }
        .right{
          font-weight: 400;
          font-size: 28rpx;
          color: #999999;
          width: 160rpx;
          height: 64rpx;
          line-height: 64rpx;
          background: #EFEFEF;
          text-align: center;
          border-radius: 64rpx;
        }
        .left{
          display: flex;
          align-items: center;
          .fo{
            padding-left: 20rpx;
            .time{
              font-weight: 400;
              font-size: 22rpx;
              color: #999999;
            }
            .name{
              font-weight: 500;
              font-size: 32rpx;
              color: #2B2B2B;
            }
          }
          .avatar{
            width: 70rpx;
            height: 70rpx;
            position: relative;
            .img{
              border-radius: 50%;
              overflow: hidden;
            }
            .vip{
              position: absolute;
              right: 0;
              bottom: 0;
              width: 28rpx;
              height: 28rpx;
            }
          }
        }
      }
    }
  }
</style>